<template>
<div id="app">
  <div class="login-container">
<!-- 头像   -->
    <div class="login_box">
      <div class="logo_src">
        <img :src='imgSrc' alt=""/>
      </div>
<!--账号-->
      <el-form :model="loginForm" ref="loginFormRef" :rules="rules" class="login_form" label-width="0px">
        <el-form-item prop="username">
          <el-input  v-model="loginForm.username" placeholder="请输入用户名">
            <i slot="prefix" class="el-icon-user-solid"></i>
          </el-input>
        </el-form-item>

<!--密码-->

        <el-form-item prop="password">
          <el-input show-password v-model="loginForm.password" placeholder="请输入密码">
            <i slot="prefix" class="el-icon-key"></i>
          </el-input>
        </el-form-item>


<!--按钮-->
        <el-form-item class="btns">
          <el-button class="el-icon-s-promotion"
                     type="primary"
                     @click="login"
                     round>
          </el-button>

          <el-button class="el-icon-refresh-right"
                     type="info"
                     @click="loginFormRef"
                     round>
          </el-button>
          </el-form-item>

      </el-form>

    </div>


  </div>
</div>
</template>

<script>
export default {
  data(){
    return{
      loginForm:{
        username:'admin',
        password:'123456'
      },
      rules:{
        username: [
          { required: true, message: '请输入账户', trigger: 'blur' },

        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },

        ]
      },
      imgSrc:require('@/assets/logo1.jpg')
    }
  }
  ,
  methods:{
    loginFormRef(){
      this.$refs.loginFormRef.resetFields();
    },
    login(){
      this.$refs.loginFormRef.validate(async valid=>{
        if(!valid) return;
        const {data:res}= await this.$http.post('login',this.loginForm);
        if(res.meta.status!==200) return this.$message.error('登录失败，请检查账号或密码是否争正确');
          this.$message.success('登录成功')
          window.sessionStorage.setItem("token",res.data.token);
          this.$router.push('/Home')


      })
    }

  }
}

</script>


<style lang="less" scoped>
.login-container{
  background-color: #eedfff;

  height: 100vh;
}
.login_box{
  width: 450px;
  height:350px ;
  background-color: white;
  border-radius: 10px;
  box-shadow: 10px 10px 40px -10px gray;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
  transition-duration:0.3s;
  transition-timing-function:linear;
  transition-delay:0s;
  transition-property:all;
}
.login_box:hover{
  box-shadow: 20px 20px 70px -10px gray;

}
.logo_src{
  height: 130px;
  width: 130px;
  border-radius: 50%;
  border: 7px solid gray;
  box-shadow: 3px 3px  10px grey;
  position: absolute;
  transform: translate(-50%,-50%);
  left: 50%;
  img{
    height: 100%;
    width: 100%;
    border-radius: 50%;
    animation:zhuandong 20s linear infinite forwards;
  }
}

.login_form{
  position: absolute;
  bottom:0 ;
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
  margin-bottom: 30px;
}
.btns{
  display: flex;
  justify-content: right;
}
.el-icon-user-solid{
  margin-left: 10px;
}
.el-icon-key{
  margin-left: 10px;

}
#app{
  opacity: 0;
  animation: bottomBtn 0.5s linear 100ms forwards;
}

@keyframes bottomBtn {
  to{
    opacity: 1;
  }
  from{
    opacity: 0;
  }
}

@keyframes zhuandong {
  to{
    transform: rotate(0);
  }
  from{
    transform: rotate(-360deg);
  }

}



</style>
